.banner-group {
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
}
.banner {
    width: 100%;
}
.banner>ul>li {
    background-color: #c4ccde;
}
.banner>ul>li>* {
    min-height: 50vw;
    font-size: 4rem;
}
.banner-prev-group, .banner-next-group {
    width: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation-name: horizontal-sloshing;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.banner-prev, .banner-next {
    height: 12%;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 5vw;
    z-index: 1;
}
.banner-prev-group {
    animation-direction: alternate-reverse;
}
.banner-next-group {
    animation-direction: alternate;
}
.banner-prev {
    transform: rotate(-90deg) translateY(80%);
}
.banner-next {
    transform: rotate(90deg) translateY(80%);
}
@keyframes horizontal-sloshing {
    from {
        left: -1%;
    } to {
        left: 1%;
    }
}
